﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>时尚衣橱购物商城</title>
    <meta name="description" content="Default Description">
    <meta name="keywords" content="E-commerce" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- place favicon.ico in the root directory -->
    <link rel="shortcut icon" type="image/x-icon" href="img/icon/favicon.png">
    <!-- Google Font css -->
    <link href="https://fonts.googleapis.com/css?family=Lily+Script+One" rel="stylesheet"> 

    <!-- mobile menu css -->
    <link rel="stylesheet" href="/css/meanmenu.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="/css/animate.css">
    <!-- nivo slider css -->
    <link rel="stylesheet" href="/css/nivo-slider.css">
    <!-- owl carousel css -->
    <link rel="stylesheet" href="/css/owl.carousel.min.css">
    <!-- slick css -->
   <link rel="stylesheet" href="/css/slick.css">
    <!-- price slider css -->
    <link rel="stylesheet" href="/css/jquery-ui.min.css">
    <!-- fontawesome css -->
    <link rel="stylesheet" href="/css/font-awesome.min.css">
     <!-- fancybox css -->
    <link rel="stylesheet" href="/css/jquery.fancybox.css">
    <!-- bootstrap css -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!-- default css  -->
    <link rel="stylesheet" href="/css/default.css">
    <!-- style css -->
    <link rel="stylesheet" href="../static/css/style.css">
    <!-- responsive css -->
    <link rel="stylesheet" href="/css/responsive.css">
    <link rel="stylesheet" href="/css/responsive.css">
    <link rel="stylesheet" href="/css/responsive.css">
    <link rel="stylesheet" href="/css/shortcode/header.css">
    <link rel="stylesheet" href="/css/shortcode/service.css">
    <link rel="stylesheet" href="/css/shortcode/product.css">
    <link rel="stylesheet" href="/css/shortcode/slider.css">
    <link rel="stylesheet" href="/css/shortcode/parallax.css">
    <link rel="stylesheet" href="/css/shortcode/login.css">
    <link rel="stylesheet" href="/css/shortcode/subscribe.css">
    <link rel="stylesheet" href="/css/shortcode/footer.css">
    <link rel="stylesheet" href="/css/shortcode/shop.css">
    <link rel="stylesheet" href="/css/shortcode/theme-default.css">
    <link rel="stylesheet" href="/css/shortcode/blog.css">
    <link rel="stylesheet" href="/css/shortcode/header.css">
    <link rel="stylesheet" href="/css/shortcode/theme-default.css">
    <!-- modernizr js -->
    <script src="/js/vendor/modernizr-2.8.3.min.js"></script>
</head>

<body>


    <!-- Wrapper Start -->
    <div class="wrapper">
        <!-- Header Area Start -->
        <header>
            <!-- Kiosk Header Top Start -->
            <div class="kiosk-header-top">
                <div class="container">
                    <div class="row">
                        <!-- Header Top left Start -->                        
                        <div class="col-lg-6 col-md-12 d-center">
                            <div class="kiosk-header-top-left">
                                <i class="fa fa-phone"></i>中软国际: 400-183-1066
                            </div>                        
                        </div>
                        <!-- Header Top Right Start -->                                       
                        <div class="col-lg-6 col-md-12">
                            <div class="kiosk-header-top-right">
                                <div class="search-box-view">
                                    <form action="#">
                                        <input type="text" class="email" placeholder="Search Your Product" name="product">
                                        <button type="submit" class="submit"></button>
                                    </form>
                                </div>
                                <!-- Header-list-menu End -->
                            </div>
                        </div>
                        <!-- Header Top Right End -->
                    </div>
                </div>
                <!-- Container End -->
            </div>
            <!-- Header Top End -->
            <!-- Kiosk Header Bottom Start -->
            <div th:include="top :: topFragment"></div>
            <!-- Header Bottom End -->
        </header>
        <!-- Header Area End -->   
        <!-- Breadcrumb Start -->
        <!-- Breadcrumb End -->
        <!-- Shop Page Start -->
        <div class="main-shop-page ptb-70">
            <div class="container">
                <!-- Row End -->
                <div class="row">
                    <!-- Sidebar Shopping Option Start -->
                    <div class="col-lg-3  order-2">
                        <div class="sidebar white-bg">
                            <form id="tyPeForm" method="post">
                                <div class="single-sidebar category-sidebar">
                                    <div class="group-title">
                                        <h2>类别</h2>
                                    </div>
                                    <ul id="sortUI">
                                        <li><a th:onclick="goType()" th:value="0" href="#">鞋</a></li>
                                        <li><a href="#">包</a></li>
                                        <li><a href="#">服装</a></li>
                                        <li><a href="#">手表</a></li>
                                        <li><a href="#">墨镜</a></li>
                                    </ul>
                                </div>
                            </form>
                            <div class="single-sidebar">
                                <div class="group-title">
                                    <h2>按价格筛选</h2>
                                </div>
                                <form action="#">
                                    <div id="slider-range" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
                                        <div class="ui-slider-range ui-corner-all ui-widget-header" ></div>
                                    </div>
                                        <input id="amount" class="amount" readonly="" type="text">
                                </form>
                            </div>
                            <div class="recent-post same-sidebar border-default single-sidebar best-product-sidebar">
                                <div class="group-title">
                                    <h2>销量最高</h2>
                                </div>
<!--                                <form action="/toSale_number" method="post" id="maxSale" >-->
                                    <ul th:each="maxSale:${maxSaleList}">
                                        <!-- Singel Post Thumb Start -->
                                        <li class="post-thumb fix">
                                            <div class="left-post-thumb f-left mr-20 mb-20">
                                                <a href="#"><img class="img" th:src="|/clothes/${maxSale.c_picture1}|" alt="latest-post-imgae"></a>
                                            </div>
                                            <div class="right-post-thumb fix">
                                                <h4><a href="#" th:text="${maxSale.c_name}">Women fashion</a></h4>
                                                <p>销量:<span th:text="${maxSale.sale_number}"></span></p>
                                            </div>
<!--                                            <button type="hidden" onclick="saleForm()"></button>-->
                                        </li>
                                        <!-- Singel Post Thumb End -->

                                    </ul>
<!--                                </form>-->
                            </div>
<!--                            下面tags小标签->无用-->
                            <div class="categorie recent-post same-sidebar border-default shop-tag single-sidebar">
                                <div class="group-title">
                                    <h2>标签</h2>
                                </div>
                                <ul class="tag-list">
                                    <li><a href="#">Man</a></li>
                                    <li><a href="#">Women</a></li>
                                    <li><a href="#">Accessories</a></li>
                                    <li><a href="#">Shoes</a></li>
                                    <li><a href="#">Children</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- Sidebar Shopping Option End -->                    
                    <!-- Product Categorie List Start -->
                    <div class="col-lg-9 order-lg-2">
                        <!-- Grid & List View Start -->
                        <form id="searchFrom" method="post" action="/shop">
                            <input id="currentPage" type="hidden" name="currentPage"/>
                            <input id="typeName" type="hidden" name="type_name"/>
                           <!-- <input id="shopSearch" type="hidden" name="shopSearch" th:value="${shopSearch.type_id}"/>-->
                            <div class="grid-list-top fix mb-10">
                                <!-- Toolbar Short Area Start -->
                                <div class="main-toolbar-sorter f-left">
                                    <div class="toolbar-sorter">
                                        <label>排序方式</label>
                                        <select class="sorter" name="sorter">
                                            <option value="">请选择排序方式</option>
                                            <option value="c_createtime" th:selected="${shopSearch.sorter=='c_createtime'}">上架时间排序</option>
                                            <option value="sale_number" th:selected="${shopSearch.sorter=='sale_number'}">最高销量排序</option>
                                            <option value="remark_score" th:selected="${shopSearch.sorter=='remark_score'}">最高评分排序</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="main-toolbar-sorter f-left">
                                    <div class="toolbar-sorter">
                                        <label>类别搜索</label>
                                        <select class="sorter" name="type_id">
                                            <option value="0">请选择类别</option>
                                            <option th:each="type:${typeList}" th:value="${type.type_id}"
                                            th:text="${type.type_name}"
                                            th:selected="${type.type_id==shopSearch.type_id}"></option>
                                        </select>
                                    </div>
                                </div>
                                <input type="submit" class="kiosk-login-btn" value="搜索" />
                                <!-- Toolbar Short Area End -->
                                <div class="grid-list-view f-right">
                                    <ul class="list-inline nav">
                                        <li><a data-toggle="tab" href="#grid-view"><i class="fa fa-th"></i></a></li>
                                        <li><a  data-toggle="tab" href="#list-view"><i class="fa fa-list-ul"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </form>
                        <!-- Grid & List View End -->
                        <div class="main-categorie product-area">
                            <!-- Grid & List Main Area End -->
                            <div class="tab-content fix">
                                <div id="grid-view" class="tab-pane active">
                                        <div class="row" id="shopListDiv">
                                            <!-- Single Product Start -->
                                            <div class="col-lg-4 col-sm-6" th:each="shop:${shopList}">
                                                <div class="single-product">
                                                    <!-- Product Image Start -->
                                                    <div class="kiosk-product-img">
                                                        <a th:href="@{/product(c_id=${shop.c_id})}">
                                                            <img class="first-img" th:src="|/clothes/${shop.c_picture1}|"
                                                                 alt="single-product" th:width="200" th:height="300">
                                                            <!--                                                        <img class="second-img" src="img/products/4.jpg" alt="single-product">-->
                                                        </a>
                                                    </div>
                                                    <!-- Product Image End -->
                                                    <!-- Product Content Start -->
                                                    <div class="kiosk-product-content">
                                                        <p>￥<span class="price" th:text="${shop.minprice}"></span></p>
                                                        <h4><a href="product" th:text="${shop.c_name}"></a></h4>
                                                        <div class="kiosk-product-action">
                                                            <div class="kiosk-action-content">
                                                                <a href="wishlist.html" data-toggle="tooltip" title="Add to Wishlist"><i class="fa fa-heart"></i></a>
                                                                <a href="cart.html" data-toggle="tooltip" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                                                <a th:href="@{/product(c_id=${shop.c_id})}" data-toggle="tooltip" title="Product Details"><i class="fa fa-link"></i></a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- Product Content End -->
                                                </div>
                                            </div>
                                        </div>
                                </div>
                                <!-- #grid view End -->
                                <div id="list-view" class="tab-pane">
                                    <!-- Single Product Start -->
                                    <div class="single-product" th:each="shop:${shopList}">
                                        <!-- Product Image Start -->
                                        <div class="kiosk-product-img">
                                            <a th:href="@{/product(c_id=${shop.c_id})}">
                                                <img class="first-img" th:src="|/clothes/${shop.c_picture1}|" alt="single-product">
                                            </a>
                                        </div>
                                        <!-- Product Image End -->
                                        <!-- Product Content Start -->
                                        <div class="kiosk-product-content">           
                                            <h4><a href="product.html" th:text="${shop.c_name}"></a></h4>
                                            <p><span class="price" th:text="${shop.minprice}"></span>￥</p>
                                            <p th:text="${shop.c_desc}"></p>
                                            <div class="kiosk-product-action">
                                                <div class="kiosk-action-content">
                                                    <a href="wishlist.html" data-toggle="tooltip" title="Add to Wishlist"><i class="fa fa-heart"></i></a>
                                                    <a href="cart.html" data-toggle="tooltip" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                                    <a th:href="@{/product(c_id=${shop.c_id})}" data-toggle="tooltip" title="Product Details"><i class="fa fa-link"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Product Content End -->
                                    </div>
                                    <!-- Single Product Start -->
                                    <!-- Single Product Start -->
                                </div>
                                <!-- #list view End -->
                            </div>
                            <!-- Grid & List Main Area End -->
                        </div>
                        <!--Breadcrumb and Page Show Start -->
                        <div class="kiosk-pagination-box fix">
                            <ul class="pagination">
                                <li class="kiosk-login-btn"><a style="color: white" href="#" th:onclick="gotoPage(1)">首页</a></li>
                                <li class="kiosk-login-btn" th:if="${page.pageNum!=1}"><a style="color: white" href="#" th:onclick="|gotoPage(${page.prePage})|">上一页</a></li>
                                <li class="kiosk-login-btn"><span style="color: white" th:text="${page.pageNum}"></span></li>
                                <li class="kiosk-login-btn" th:if="${page.pageNum}!= ${page.pages}"><a style="color: white" href="#" th:onclick="|gotoPage(${page.nextPage})|">下一页</a></li>
                                <li class="kiosk-login-btn" ><a style="color: white" href="#" class="next" th:onclick="|gotoPage(${page.pages})|">尾页</a></li>
                                <span class="kiosk-login-btn" style="color: white">
					共<font th:text="${page.pages}"></font>页
					共<font th:text="${page.total}"></font>条
				</span>
                            </ul>
<!--                            <ul class="blog-pagination ">-->
<!--                                <li><a href="#">1</a></li>-->
<!--                                <li class="active"><a href="#">2</a></li>-->
<!--                                <li><a href="#"><i class="fa fa-angle-right"></i></a></li>-->
<!--                            </ul>-->
<!--                            <div class="toolbar-sorter-footer">-->
<!--                                <label>show</label>-->
<!--                                <select class="sorter" name="sorter">-->
<!--                                    <option value="Position" selected="selected">9</option>-->
<!--                                    <option value="Product Name">15</option>-->
<!--                                    <option value="Price">30</option>-->
<!--                                </select>-->
<!--                                <span>per page</span>-->
<!--                            </div>-->
                        </div>
                        <!--Breadcrumb and Page Show End -->
                    </div>
                    <!-- product Categorie List End -->
                </div>
                <!-- Row End -->
            </div>
            <!-- Container End -->
        </div>
        <!-- Shop Page End -->
        <!-- newsletter Start -->
        <div th:include="lop :: topFragment"></div>
    </div>
    <!-- Wrapper End -->
    <!-- jquery 3.12.4 -->
    <script src="/js/vendor/jquery-1.12.4.min.js"></script>
    <!-- mobile menu js  -->
    <script src="/js/jquery.meanmenu.min.js"></script>
    <!-- scroll-up js -->
    <script src="/js/jquery.scrollUp.js"></script>
    <!-- owl-carousel js -->
    <script src="/js/owl.carousel.min.js"></script>
    <!-- slick js -->
    <script src="/js/slick.min.js"></script>
    <!-- wow js -->
    <script src="/js/wow.min.js"></script>
    <!-- price slider js -->
    <script src="/js/jquery-ui.min.js"></script>
    <script src="/js/jquery.countdown.min.js"></script>
    <!-- nivo slider js -->
    <script src="/js/jquery.nivo.slider.js"></script>
    <!-- fancybox js -->
    <script src="/js/jquery.fancybox.min.js"></script>
    <!-- bootstrap -->
    <script src="/js/bootstrap.min.js"></script>
    <!-- popper -->
    <script src="/js/popper.js"></script>
    <!-- stellar -->
    <script src="/js/jquery.stellar.min.js"></script>
    <script src="/js/parallax.js"></script>
    <!-- plugins -->
    <script src="/js/plugins.js"></script>
    <!-- main js -->
    <script src="/js/main.js"></script>
<script>
    function gotoPage(currentPage){
        //想要将请求发送到concertList这个控制器上去
        //并且向该控制器携带参数名为currentPage的配置
        $("#currentPage").val(currentPage);
        $("#searchFrom").submit();
    }
    function goType(){
        $("#sortUI li").click(function (){
            var type_name=$($(this).children("a")[0]).attr("value");
            $("#typeName").val(type_name);
        })
        $("#searchFrom").submit();
    }
</script>
</body>
</html>
